<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head th:replace="index::head">

</head>

<body>
    <ul class="layui-nav" th:replace="index::nav">
    </ul>

    <div>
        <div style="text-align: center;background-color: #4191C2;color: white;height: 150px;">
            <h1 style="padding: 50px">打卡记录</h1>
        </div>
    </div>

    <div class="layui-container" style="text-align: center;margin-top: 70px;">
      <h1>共打卡<span th:text="${count}"></span>次</h1>
        <div class="layui-card">
           <div class="layui-card-body">
            <table class="layui-table" lay-even lay-skin="line" lay-size="lg">
              <colgroup>
                <col width="150">
                <col>
              </colgroup>
              <thead>
                <tr>
                  <th>时间</th>
                  <th>类型</th>
                </tr> 
              </thead>
              <tbody th:each="a:${attendances}">
                <tr>
                  <td th:text="${a.checkTime}">贤心</td>
                  <td th:text="${a.punchType}">人生就像是一场修行</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
    </div>


</body>
<script>
    function checkIn() {
        $.post('/attendance',{punchType:'上班'},function(data){
            if(data.code===200){
                layer.msg('打卡成功！'); 
            }
        })
    }

    function checkOut() {
        $.post('/attendance',{punchType:'下班'},function(data){
            if(data.code===200){
                layer.msg('打卡成功！'); 
            }
        })
    }
</script>

</html>